<template>
  <div class="app-container">
    <!-- 需求信息 -->
      <el-row :gutter="10">
          <el-col :span="8">
                <el-button type="success" icon="el-icon-circle-plus-outline" @click="showDialog" size="small" >NPI网络变更需求</el-button>
          </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 20px">
          <el-form :model="queryParams" ref="queryParams" :inline="true" v-show="showSearch" >
            <el-col :span="8">
                    <el-radio-group v-model="queryParams.radio3" @change="radioChange">
                        <el-radio-button label="待处理"></el-radio-button>
                        <el-radio-button label="已处理"></el-radio-button>
                        <el-radio-button label="已结束"></el-radio-button>
                    </el-radio-group>
            </el-col>
            <el-col :span="8">
                <el-form-item label="日期" >
                    <el-date-picker
                        v-model="queryParams.constDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="queryList()">搜索</el-button>
                </el-form-item>
            </el-col>
          </el-form>
      </el-row>
      <el-table :data="userList">
          <el-table-column label="日期" align="center" prop="constDate" />
          <el-table-column label="需求" align="center" prop="demand" />
          <el-table-column label="进度" align="center" prop="progress" />
          <el-table-column label="操作人" align="center" prop="proName" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width">
            <template slot-scope="scope" v-if="scope.row.userId !== 1" >
              <el-button
              id="userIdJuri"
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-hasPermi="['system:user:edit']"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-upload2"
                v-hasPermi="['system:user:remove']"
              >发布</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-hasPermi="['system:user:remove']"
              >撤回</el-button>
            </template>
          </el-table-column>
      </el-table>
      <!-- 普通用户 -->
        <el-dialog title="NPI网络变更需求" center :visible.sync="dialogTableVisible" >
            <el-form :model="form" label-width="80px" label-position='left'>
                 <el-row>
                    <el-col :span="7">
                        <el-form-item label="专案" label-width="100px">
                          <el-select placeholder="专案选择" v-model="form.roleId" @change="change" >
                              <el-option
                              v-for="item in roleOptions"
                              :key="item.roleId"
                              :label="item.roleName"
                              :value="item.roleName"
                              :disabled="item.status == 1"
                              ></el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="位置" label-width="100px">
                          <el-select placeholder="位置选择" v-model="form.roleId" @change="changes">
                            <el-option
                              v-for="item in roleOptions"
                              :key="item.roleId"
                              :label="item.roleId"
                              :value="item.roleId"
                              :disabled="item.status == 1"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="需求人员" label-width="100px">
                            <el-input v-model="from.roleClass" placeholder="请输入名称" value=''/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="需求描述" label-width="100px">
                          <el-input  v-model="form.demand"  type="textarea" placeholder="请输入需求描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">保 存</el-button>
              <el-button @click="dialogFormVisible = false">发 布</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 资安管理员 -->
        <el-dialog title="NPI网络变更需求（资安审批）" center width="70%" :visible.sync="dialogFormVisible2">
            <el-form>
                      <el-row :gutter="40">
                         <el-col :span="8">
                             <el-form-item label="专案" label-width="100px">
                              <el-select placeholder="专案选择" v-model="form.roleId" @change="change" >
                                 <el-option
                                     v-for="item in roleOptions"
                                     :key="item.roleId"
                                     :label="item.roleName"
                                     :value="item.roleId"
                                     :disabled="item.status == 1"
                                 ></el-option>
                              </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="8">
                           <el-form-item label="位置" label-width="100px">
                               <el-select placeholder="位置选择" v-model="form.roleId" @change="changes">
                                 <el-option
                                 v-for="item in roleOptions"
                                 :key="item.roleId"
                                 :label="item.roleId"
                                 :value="item.roleId"
                                 :disabled="item.status == 1"
                                 ></el-option>
                               </el-select>
                           </el-form-item>
                         </el-col>
                         <el-col :span="8" :pull="1">
                             <el-form-item label="需求人员" label-width="100px">
                                 <el-input v-model="from.roleClass" placeholder="请输入名称" value=''/>
                             </el-form-item>
                         </el-col>
                      </el-row>
                      <el-row>
                         <el-col :span="22">
                            <el-form-item label="需求描述"  label-width="100px">
                              <el-input  v-model="form.demand" :autosize="{ minRows: 4,maxRows:4}" type="textarea" placeholder="请输入需求描述"></el-input>
                            </el-form-item>
                         </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="22">
                            <el-form-item label="资安意见" label-width="100px">
                              <el-input  v-model="form.demand" :autosize="{ minRows: 4,maxRows:4}" type="textarea" placeholder="请输入意见"></el-input>
                            </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="网络工程师" label-width="100px">
                         <el-input></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" justify="space-between" align="middle">
                    <el-col :span="6" :push="2">
                      <el-form-item>
                        <el-button type='primary'>保存</el-button>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :push="1">
                      <el-form-item>
                        <el-button type='primary'>同意</el-button>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :push="1">
                      <el-form-item>
                        <el-button type='primary'>拒绝</el-button>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :push="1">
                      <el-form-item>
                        <el-button type='primary'>取消</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
            </el-form>
        </el-dialog>
                <!-- 网络管理员 -->
          <el-dialog title="NPI网络变更需求（网络管理员更新）" center :visible.sync="dialogVisible3" width="70%" style="margin-left: 220px">
            <el-form >
                <el-row>
                   <el-col :span="8">
                       <el-form-item label="专案" label-width="100px">
                         <el-select placeholder="专案选择" v-model="form.case" @change="change" >
                           <el-option
                           v-for="item in roleOptions"
                           :key="item.roleId"
                           :label="item.roleName"
                           :value="item.roleId"
                           :disabled="item.status == 1"
                           ></el-option>
                         </el-select>
                       </el-form-item>
                   </el-col>
                   <el-col :span="8" :pull="1">
                     <el-form-item label="位置" label-width="100px" >
                         <el-select placeholder="位置选择" v-model="form.place" @change="changes">
                           <el-option
                               v-for="item in roleOptions"
                               :key="item.roleId"
                               :label="item.roleId"
                               :value="item.roleId"
                               :disabled="item.status == 1"
                           ></el-option>
                         </el-select>
                     </el-form-item>
                   </el-col>
                   <el-col :span="8" :pull="1">
                       <el-form-item label="需求人员" label-width="100px">
                           <el-input v-model="from.reqMan" placeholder="请输入名称" value=''/>
                       </el-form-item>
                   </el-col>
                 </el-row>
                 <el-row>
                   <el-col :span="22">
                       <el-form-item label="需求描述"  label-width="100px">
                            <el-input  v-model="form.describe" :autosize="{ minRows: 4,maxRows:4}" type="textarea" placeholder="请输入需求描述"></el-input>
                       </el-form-item>
                   </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="资安意见" label-width="100px">
                            <el-input  v-model="form.idea" :autosize="{ minRows: 4,maxRows:4}" type="textarea" placeholder="请输入意见"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="网络工程师" label-width="100px">
                           <el-input v-model="form.engineer"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                          <el-divider content-position="left" class='title'>涉及网络对象</el-divider>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <el-form-item>
                          <el-table
                              ref="multipleTable"
                              :data="tableData"
                              tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange"
                              >
                              <el-table-column
                                type="selection"
                                width="55">
                              </el-table-column>
                              <el-table-column
                                prop="originName"
                                label="源名称"
                                width="120"
                                align="center">
<!--                              <template slot-scope="scope">{{ scope.row.date}}</template>
 -->                          </el-table-column>
                              <el-table-column
                                prop="originId"
                                label="源Id"
                                align="center"
                                width="120">
                              </el-table-column>
                              <el-table-column
                                prop="originPort"
                                align="center"
                                label="源端口"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="originBehavior"
                                align="center"
                                label="源行为"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="aimName"
                                align="center"
                                label="目标名称"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="aimIp"
                                align="center"
                                label="目标Ip"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="aimPort"
                                align="center"
                                label="目标端口"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="reACL"
                                align="center"
                                label="更新ACL"
                                show-overflow-tooltip>
                              </el-table-column>
                            </el-table>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                          <el-form-item>
                            <el-button style="margin-top: 40px;" type="primary" @click=''>-</el-button>
                          </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item>
                          <el-button type="primary" @click=''>+</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                          <el-divider content-position="left" class='title'>ACL变更</el-divider>
                      </el-col>
                    </el-row>
                    <el-row type="flex" justify="space-around">
                      <el-col :span="8">
                         <el-form-item label="所属交换机IP" label-width="100px" prop="switchIp">
                           <el-input placeholder="请输入" style="width: 220px;" v-model="form.switchIp"></el-input>
                         </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="ACL模板" label-width="100px">
                            <el-select v-model="form.switchs" placeholder="请选择活动区域" style="width: 220px;">
                              <el-option :label="item" :value="item" v-for="(item,index) in switchs" ></el-option>
                            </el-select>
                        </el-form-item>
                         <!-- <el-form-item label="所属交换机" label-width="100px" prop="switch">
                           <el-input placeholder="请输入" style="width: 220px;" v-model="form.switch"></el-input>
                         </el-form-item> -->
                      </el-col>
                    </el-row>
                    <el-row type="flex" justify="space-around">
                      <el-col :span="8">
                         <el-form-item label="变更人员" label-width="100px" prop="reMan">
                           <el-input placeholder="请输入" style="width: 220px;" v-model="from.reMan"></el-input>
                         </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="ACL名称" label-width="100px">
                            <el-select v-model="form.ACLName" placeholder="请选择活动区域" style="width: 220px;">
                              <el-option :label="item" :value="item" v-for="(item,index) in ACLName" ></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="ACL名称" label-width="100px" prop="ACLName">
                           <el-input placeholder="请输入" style="width: 220px;" v-model="from.ACLName"></el-input>
                         </el-form-item> -->
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <el-form-item>
                          <el-table
                              ref="multipleTable"
                              :data="tableData"
                              tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange">
                              <el-table-column
                                type="selection"
                                width="55">
                              </el-table-column>
                              <el-table-column
                                label="ACL序号"
                                prop="ACL"
                                width="120">
                                <!-- <template slot-scope="scope">{{scope.row.date}}</template> -->
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="类型"
                                width="120">
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="源IP"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="源端口"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="行为"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="目标类型"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="目标IP"
                                show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="目标端口"
                                show-overflow-tooltip>
                              </el-table-column>
                            </el-table>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-col>
                          <el-form-item>
                            <el-button style="margin-top: 40px;" type="primary">-</el-button>
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col>
                        <el-form-item>
                          <el-button type="primary">+</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-divider content-position="left" class='title'>网络拓扑变更</el-divider>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="3"
                          :on-exceed="handleExceed"
                          :file-list="fileList">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" justify="space-between" align="middle">
                      <el-col :span="6" :push="2">
                        <el-form-item>
                          <el-button type='primary' @click='save'>保 存</el-button>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6" :push="1">
                        <el-form-item>
                          <el-button type='primary'>同 意</el-button>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6" :push="1">
                        <el-form-item>
                          <el-button type='primary'>拒 绝</el-button>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6" :push="1">
                        <el-form-item>
                          <el-button type='primary'>取 消</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
            </el-form>
                    <!-- <span slot="footer" class="dialog-footer">
                             <el-button @click="dialogVisible3 = false">取 消</el-button>
                             <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
                         </span> -->
          </el-dialog>
  </div>
</template>
<script>
export default {
    data() {
        return {
        // 图片上传
          fileList:[],
          tableData: [{
              originName: '2016-05-03',
              originId: '王小虎',
              originPort: '上海市普陀区金沙江路 1518 弄',
              originBehavior:1,
              aimName:"1",
              aimIp:'3',
              aimPort:4,
              reACL:'是'
                  }],
                  multipleSelection: [],
            from:{

              ACLName:'',
              reMan:'',
              // 交换机名称
              switchs:null,
              // 交换机IP
              switchIp:null,
              // 专案名称
              case:[],
              // 意见
              idea:'',
              // 需求人员
              reqMan:null,
              // 位置
              place:null,
              // 需求描述
              describe:'',
              // 工程师
              engineer:'',
            },
            //状态选择
            radio3: '',
            // ACL名称
            ACLName:['我','有'],
            //日期
            constDate: '',
            //需求
            demand: '',
            //进度
            progress: '',
            //操作人
            proName: '',
            // 显示搜索条件
            showSearch: true,
            roleClass: '',
            role1:"1",
            dialogTableVisible: false,
            dialogFormVisible2: false,
            dialogVisible3:false,
            form: {

            },
            switchs:[1,2,3],
            //下拉框选项
            roleOptions: [],
            //下拉选项ID
            roleId: '',
            //下拉选项内容
            roleName: '',
            //需求人员
            needName: '',
            roleOptions : [
                {
                    roleId:"100",
                    roleName:"测试选项一",
                    roleClass:"5555"
                },
                {
                    roleId:"101",
                    roleName:"测试选项二",
                    roleClass:"1111"
                },
                {
                    roleId:"102",
                    roleName:"测试选项三",
                    roleClass:"2222"
                },
                {
                    roleId:"103",
                    roleName:"测试选项四",
                    roleClass:"3333"
                },
            ],
            formLabelWidth: '120px',
            //表格数据
            userList:
             [
                {
                    constDate: "2021-09-28",
                    demand: "NPI网络变更需求",
                    progress: "未发布",
                    proName: "用户"
                },
                {
                    constDate: "2021-10-28",
                    demand: "NPI网络变更需求",
                    progress: "待审核",
                    proName: "资安管理员"
                },
                {
                    constDate: "2021-11-10",
                    demand: "NPI网络变更需求",
                    progress: "审核成功",
                    proName: "网络管理员"
                },
            ],
            //查询参数
            queryParams: {
                radio3: "待处理",
                constDate: ""
            }
        }
    },

    methods: {
        //查询按钮
        queryList(){
            console.log(this.queryParams)
        },
        change(val){
           for(var i = 0;i<this.roleOptions.length;i++){
               if(this.roleOptions[i].roleId == val){
                   // console.log(this.roleOptions[i].roleId)
                   // console.log(this.roleOptions[i].roleName)
                   // console.log(this.roleOptions[i].roleClass)
                   this.roleClass = this.roleOptions[i].roleClass
               }
           }
        },
        handleRemove(file, fileList) {
                console.log(file, fileList);
              },
              handlePreview(file) {
                console.log(file);
              },
              handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
              },
              beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
              },
        save(){
          console.log(this.form)
        },
         handleSelectionChange(val) {
                this.multipleSelection = val;
              },
        changes(val){
           for(var i = 0;i<this.roleOptions.length;i++){
               if(this.roleOptions[i].roleId == val){
                   console.log(this.roleOptions[i].roleId)
                   console.log(this.roleOptions[i].roleName)
                   console.log(this.roleOptions[i].roleClass)
                   this.roleClass = this.roleOptions[i].roleClass
               }
           }
        },
        showDialog(){
        if(this.role1==1){
          this.dialogVisible3=true
            }
        },
        radioChange(val){
          console.log(val)
        }
    },
    // watch: {
    //   $route(to,from) {
    //   console.log(1)
    //   }
    // }

}
</script>

<style>

</style>
